<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.1.0.min.js"></script>
    <style type="text/css">
    ul,li{
        list-style: none;
    }
    ul{
        padding:0;
        margin: 0;
    }
     .main{
          background-image: url(图片1.png);
          background-repeat: repeat-x;
         width: 100px;
      }
     li{
          background-color: lemonchiffon;
     }
     a{
        text-decoration: none;
         padding-left: 20px;
         width: 80px;
         display: block;
         padding-top: 3px;
         padding-bottom: 3px;
     }
        .main a{
            color: white;
        }
        .main li a{
            color: black;
            background-position: none;
        }
        .main ul{
            display: none;  隐藏子菜单
        }
    </style>
</head>
<body>
    <ul>
        <li class="main">
            <a href="#">菜单1</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>

        </li>
        <li class="main">
            <a href="#">菜单2</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
        <li class="main">
            <a href="#">菜单3</a>
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </li>
    </ul>


    <script>
        $(document).ready(function(){
            $(".main>a").click(function(){
                var ulNode=$(this).next("ul");
                /*if(ulNode.css("display")=="none"){
                    ulNode.css("display","block");
                }else{
                    ulNode.css("display","none");
                }*/
                /*ulNode.show();
                ulNode.hide();*/
                ulNode.toggle(500);
                /*
                toggle()可以是数字、slow、normal、fast
                自己判断隐藏还是显示，周而复始*/
                /*ulNode.slideDown();
                ulNode.slideUp;
                ulNode.slideToggle();  *//*自己判断，周而复始*/
            })
        })
    </script>
</body>
</html>